<template>
	<div>
		<!---------轮播图--------------->
		<!----运用的vue-awesome-swiperd的插件，这是vue自带的插件-------->
		<div class="shop">			
			<swiper :options="swiperOption"  ref="mySwiper">  
				<!--key="$index"为了解决vue自带的显示黄色字体的警告问题-->
	            <swiper-slide v-for="item in dylunbo" key="$index">  
	            	<img :src="item.url60x60" />
	            </swiper-slide>   
	            <div class="swiper-pagination clos" slot="pagination"></div>  
	       </swiper>  		
		</div>
		<!-----------迪士尼qq果冻------------------->
		<div class="diso">
			<p class="diso-1">比利时-【亚米】比利时黄油薄脆饼干250g</p>
			<p class="diso-2 fo">比利时黄油薄脆饼干250g</p>
			<p class="diso-3">￥57.90</p>
			<p class="diso-4"><span>已售：2895</span><span>库存：794</span></p>
		</div>
		<!--------已选------------->
		<div class="choose">
			<span class="choose1">已选</span>
			<span class="choose1">1个</span>
			<span class="righ">&#xe649;</span>
		</div>
		<div class="send">
			<span class="send-1">送至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe648;</span>
			<span class="righ">&#xe649;</span>
			<span class="send-2">北京&nbsp;&nbsp;北京市&nbsp;&nbsp;昌平区</span>
		</div>
		<!---------商品评价-------------->
		<div class="talk">
			<p class="p-talk"><span class="talk-1">商品评价(160)</span><span class="talk-2">好评度</span>&nbsp;&nbsp;<span class="col">99%</span><span class="righ">&#xe649;</span></p>
			<div class="talk-top">
				<p class="talk-top1"><span class="orange">&#xe607;&#xe607;&#xe607;&#xe607;&#xe607;</span><span class="nums">1376****430</span></p>
				<p class="talk-top2">不错，日期新鲜。给孩子吃，作为奖励。包邮的活动挺好的。</p>
				<p class="talk-top3">
					<img src="/static/market-img/1503321058946_3922_19854.jpg"/>
					<img src="/static/market-img/1503321062905_1645_19858.jpg"/>
					
				</p>
			</div>
			<p class="talk-top1"><span class="orange">&#xe607;&#xe607;&#xe607;&#xe607;&#xe607;</span><span class="nums">1376****430</span></p>
			<div class="last-talk">
				<p class="talk-top1"><span class="orange">&#xe607;&#xe607;&#xe607;&#xe607;&#xe607;</span><span class="nums">1376****430</span></p>
				<p>孩子喜欢</p>
			</div>
			<p class="lastone">查看全部评价</p>
		</div>
		<!-----------猜你喜欢--------------------->
		<div class="other">						
			<span class="other-two"><i class="i">&#xe6aa;</i>&nbsp;&nbsp;猜你喜欢</span>			
		</div>
				<!---------商品展示---------------->
		<div class="dyshop">
			<div class="pto1" v-for="i in dyjianguo" key="$index">
				<p><img :src="i.url300x300"/></p>
				<p class="d-m1">{{i.mpName}}</p>
				<p class="d-m2 d-null"></p>
				<p class="d-p">￥{{i.marketPrice}}</p>
				<p class="d-pin">
					<span class="d-p">{{i.commentInfo.commentNum}}</span>
					<span>条评论</span>&nbsp;&nbsp;<span>好评</span>
					<span class="d-p">{{i.commentInfo.goodRate}}%</span>
					<span class="d-img d-img-cart" @click="dyaddshop(i)">&#xe6f0;</span>
				</p>
			</div>
			
		</div>
	</div>
</template>

<script>
	//引入
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
	export default{
		//组件
		components: {
		    swiper,
		    swiperSlide
		},
		//初始化数据，它必须是一个方法，然后返回一个对象
		data(){
				return {
					dylunbo:[],
					dyjianguo:[],
					//设置swiper配置参数
					swiperOption: {
				          autoplay: 1000,
				          loop:true,
				          loopedSlides:4,
				          pagination : '.swiper-pagination',
					}
				}	
			},
		//所有的方法都要写在methods里
		methods:{	
			//请求数据的自定义方法
			requests(){
				//请求后台数据
				this.$http({
					//请求地址
					url:"/lyf/api/product/baseInfo",
					method:"get",
					//请求参数
					params:{
						mpsIds: 1007020801001945
					}
					//then是请求成功后的回调函数
				}).then(function(res){
//					console.log(res)
					this.dylunbo=res.body.data[0].pics
//					console.log(this.dylunbo)
				})
			},
			red(){
				this.$http({
					url:"http://m.laiyifen.com/api/search/searchList?ut=false&companyId=30&shoppingGuideJson=%7B%22attributeJson%22%3A%5B%5D%7D&brandIds=&promotionIds=&coverProvinceIds=&sortType=10&filterType=&priceRange=&pageNo=1&pageSize=20&platformId=3&areaCode=110114&navCategoryIds=1006024900000013",
					method:"get",					
				}).then(function(res){
					console.log(res);
					this.dyjianguo=res.body.data.productList;
					console.log(this.dyjianguo);
				})
			},
			dyaddshop(sp){
				if(sp.num){
					sp.num+=1;
				}else{
					sp.num=1
				}			
				this.$store.commit("addcart",sp);
				console.log(sp);
				console.log(this.$store.state.cartFoots);
			}
		},
		//调用请求数据的自定义方法
		mounted(){
			this.requests();
			this.red();
		}
	}
</script>

<style>
/*轮播图*/
.shop img{
	width: 100%;	
}
/*迪士尼qq果冻*/
.diso,.send{
	padding: 0.375rem;
	border-bottom: .2rem solid #DDDDDD;
}

.diso .diso-2{
}
.diso-2{
	color:#f44 ;
	padding-top: 0.1875rem;
	/*font-size: 14px;*/
}
.diso-3{
	color: #FF6900;
	font-weight: 700;
	padding: .2rem 0;
	font-size: 18px;
}
.diso-4 span{
	color:#666;
	font-size:16px ;
}
.diso-4 span:first-of-type{
	margin-right: 2.5rem;
}
/*已选*/
.choose{
	padding: 0.375rem;
	border-bottom: .2rem solid #DDDDDD;
}
.choose span{
	color:#666;
	font-size:16px;
}
.choose span:nth-of-type(2){
	margin-left: .8rem;
	
}
.choose .choose1{
	font-size: 16px;
}
.send .righ{
	font-size: 40px;
}
.choose .righ{
	font-size: 40px;
	float: right;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.eot');
  src: url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.svg#iconfont') format('svg');
}
.righ{
	font-family: 'iconfont';
	float: right;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.eot');
  src: url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.svg#iconfont') format('svg');
}
.send-1{
	font-family: 'iconfont';
	color: #FF6900;
}
.send span{
	font-size: 16px;
}
.send-2{
	color: #666666;
}
/*商品评价*/
.talk{
	padding: 0.375rem;
	/*margin-bottom: 1.48rem;*/
}
.talk .p-talk{
	border-bottom: 1px solid #DDDDDD;
	padding: 0 0 .375rem;
}
.talk-1{
	color: #666666;
	font-size: 16px;
}
.talk-2{
	margin-left: 3.5rem;
	font-size: 14px;
}
.talk .righ{
	font-size: 40px;
}
.col{
	color: #FF6900;
	font-size: 16px;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.eot');
  src: url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.svg#iconfont') format('svg');
}
.orange{
	font-family: 'iconfont';
	color: #FF6900;
	font-size: 14px;
}
.last-talk .talk-top1{
	padding:0;
	border-bottom: 0;
}
.talk-top1,.talk-top2,.talk-top{
	padding: .375rem 0 .375rem 0;
	border-bottom: 1px solid #DDDDDD;
}
.talk-top2{
	font-size: 14px;
	color: #666666;
}
.talk-top3 img{
	width: 1.6875rem;
	height: 1.6875rem;
	padding: .375rem 0 0 0;
}
.talk-top3 img:first-of-type{
	margin-right:.5rem ;
}
.nums{
	float: right;
}
.last-talk{
	padding: .375rem 0;
}
.last-talk{
	padding: .375rem 0;	
}
.last-talk p:nth-of-type(2){
	border-bottom: 1px solid #DDDDDD;
	padding: .375rem 0;
	font-size: 16px;
}
.lastone{
	padding: 0 3rem ;
	font-size:16px ;
}

/*猜你喜欢*/
.other{
	background: #ebeced;
	padding: .375rem;
}
.other span{
    background: #f0f0f0;
    text-align: center;
    font-size: 14px;
   	margin-left: 3.5rem;
}

.i{
	font-style: normal;
	color: #FF6600;
}
.other-two{
	font-family: 'iconfont';
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.eot');
  src: url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.svg#iconfont') format('svg');
}


/*商品展示*/
 .dyshop{
 	background: #ebeced;
 	display: flex;
 	justify-content: space-around;
 	flex-wrap: wrap;
 	padding: 0.1875rem 0.140625rem;
 	margin-bottom: 2rem;
 }
.dyshop div{
	background: white;
	width: 45%;   
	padding-left: .3rem;
}
.dyshop .pto1,.dyshop .pto2{
	border-bottom: .3rem solid #ebeced;	
}
.dyshop .pto2{
	/*margin-right: .2rem;*/
}
.d-m1{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .4rem;
    width: 3rem;
}
.dyshop div p:first-of-type{
	padding-bottom: 0.2rem;
}
.d-m2 img{
	width: .7rem;
    margin-top: .1rem;
}
.d-null{
	height:0.5rem ;
	margin-top: .1rem;
    line-height: 0.5rem;
}
.d-p{
	 color: #ff6900;
	 font-size: 0.4rem;
}
.d-pin{
	color:#999 ;
	padding: .1rem 0 .3rem 0;
}
.d-img{
	font-family: 'iconfont';
	color:#ff6900;
	font-size: .75rem;
	margin-left: 1.7rem;

}  
.d-img-cart{
	margin-left: 0;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.eot');
  src: url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.svg#iconfont') format('svg');
}


.diso-1{
	font-size:40px;
}
</style>